<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="author" content="zzz">
		<title>预定座位</title>
		<style type="text/css">
			main {
				width: 575px;
				margin: 10px auto;
				background-color: #DDDDDD;
				padding: 10px;
			}
			
			header {
				width: 95%;
				height: 40px;
				background: #F0F0F0;
				padding: 10px 0 10px 10px;
				display: flex;
				align-items: center;
			}
			
			header span {
				font-size: 15px;
			}
			
			textarea {
				width: 380px;
				line-height: 10px;
				font-size: 14px;
				margin: 0 10px;
				padding-left: 10px;
				padding-top: 10px;
				background-color: #F9F9F9;
				border: 1px solid #ddd;
			}
			
			#yuding {
				width: 90px;
				line-height: 30px;
				border: none;
				background: none;
				cursor: pointer;
			}
			
			#zhong {
				width: 555px;
				height: 335px;
				background: #F0F0F0;
				margin-top: 10px;
				position: relative;
			}
			
			.zuo {
				width: 50px;
				height: 50px;
				background-color: orange;
				position: absolute;
				line-height: 50px;
				font-size: 12px;
				text-align: center;
				cursor: pointer;
				transition: 0.5s;
			}
			
			.markdown {
				background-color: lightblue;
			}
			
			.check {
				background-color: rgb(170, 170, 170);
				background-image: url("select.png");
				background-repeat: no-repeat;
				background-size: 20px auto;
			}
			
			.zuo:hover {
				background-color: #AAAAAA;
			}
			
			footer {
				width: 93%;
				height: 100px;
				background-color: #F0F0F0;
				margin-top: 10px;
				font-size: 14px;
				padding: 10px;
			}
			
			footer p {
				margin: 0;
			}
			
			footer p:last-child {
				padding-left: 28px;
			}
		</style>
		<script type="text/javascript" src="jquery-3.1.1.js">
		</script>
	</head>

	<body>
		<main>
			<header>
				<span>已选:</span>
				<textarea></textarea>
				<input type="button" id="yuding" value="预定 " />
			</header>
			<div id="zhong">

			</div>
			<footer>
				<p>基本功能：</p>
				<p>选择座位 -- 取消已选择 -- 从小到大显示已选的座号 -- 一次最多选择6个 -- 确认预定信息 -- 确认后显示已预订，不能再被选择 -- 取消预订则返回 -- 没有选择座号则提示</p>
			</footer>
		</main>

		<script type="text/javascript">
			

			var show = $("textarea");
			var btn = $("#yuding");
			var seat = $("#zhong");

			//用for循环创建div
			for(var i = 0; i < 6; i++) {
				for(var k = 0; k < 10; k++) {
					//创建每一个作为
					var seats = document.createElement('div')
					seats.className = 'zuo';
					seat.append(seats);
					//每一行距离上方的位置
					seats.style.top = 5 + i * 55 + "px"
					//						//每一列距离左边的位置
					seats.style.left = 5 + k * 55 + "px"
					//添加座位内容
					seats.innerHTML = (i + 1) + "排" + (k + 1) + "号";

				}
			}
			$('.zuo').on('click', function() {
				if(!$(this).hasClass('markdown')) {
					$(this).toggleClass('check');

					if($('.check').length > 6) {
						alert('对不起，你选的座位超过了6个！')
						$(this).removeClass('check')
					}

					show.html('')
					for(var i = 0; i < $('.zuo.check').length; i++) {
						var texts = $('.zuo.check').eq(i).text();
						show.append(texts + ',')

					}
				} else {
					alert('很不幸座位已被预定！！！')
				}

			})
			//点击预定
			btn.click(function() {
				console.log(1)
				if($('.zuo.check').length > 0) {
					var tan = confirm('你选中了' + show.val() + '确定预定？');
					if(tan == true) {
						alert('恭喜你预定成功')

						$('.zuo.check').html('已预定');
						$('.zuo.check').addClass('markdown').removeClass('check');

						show.html('')

					} else {
						alert("你已成功取消预订");
						$('.zuo.check').remove('check')
						show.html('')
					}

				} else {
					alert('你还没选座呢，老兄')
				}
			})
		</script>
	</body>

</html>